<template>
	<div>
		<!-- 表单组件 -->
		<el-tabs v-model="queryParams.type" type="card" @tab-click="handleClick">
			<el-tab-pane label="待办" name="todos">
				<el-table ref="multipleTable" :data="todoDataList" tooltip-effect="dark" style="width: 100%">
					<el-table-column type="index" width="50">
					</el-table-column>
					<el-table-column prop="processName" label="流程名" align="center">
					</el-table-column>
					<el-table-column prop="taskName" label="任务名" width="400px" align="center">
					</el-table-column>
					<el-table-column prop="taskBegin" label="产生时间" align="center">
					</el-table-column>
					<el-table-column prop="claimTime" label="签收时间" align="center">
					</el-table-column>
					<el-table-column label="操作" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-button size="mini" @click="showOrder(scope.$index,scope.row)">查看申请单</el-button>
							<el-button size="mini" @click="handleClaim(scope.$index,scope.row)"
								v-show="scope.row.claimTime==null">签收</el-button>
							<el-button size="mini" type="primary" icon="el-icon-edit"
								@click="handleAudit(scope.$index,scope.row)" v-show="scope.row.claimTime!=null">审核
							</el-button>
							<el-button size="mini" type="primary" icon="el-icon-edit"
								@click="auditTrail(scope.$index, scope.row)">跟踪
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="已办" name="historys">
				<el-table ref="multipleTable" :data="dosDataList" tooltip-effect="dark" style="width: 100%">
					<el-table-column type="index" width="50">
					</el-table-column>
					<el-table-column prop="processName" label="流程名" align="center">
					</el-table-column>
					<el-table-column prop="taskName" label="任务名" width="400px" align="center">
					</el-table-column>
					<el-table-column prop="taskBegin" label="产生时间" align="center">
					</el-table-column>
					<el-table-column prop="claimTime" label="签收时间" align="center">
					</el-table-column>
					<el-table-column label="操作" align="center" show-overflow-tooltip width="240px">
						<template slot-scope="scope">
							<el-button size="mini" @click="showOrder(scope.$index,scope.row)">查看申请单</el-button>
							<el-button size="mini" type="primary" icon="el-icon-edit"
								@click="auditTrail(scope.$index, scope.row)">跟踪
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>

		<!-- 分页组件 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryParams.pageNum" :page-sizes="[3, 5, 8, 10]" :page-size="queryParams.pageSize"
			layout="->,total, sizes, prev, pager, next, jumper" :total="queryParams.total">
		</el-pagination>

		<!-- 转商品弹框 -->
		<el-dialog title="商品转赠品申请单详情" :visible.sync="goods2GiftsDialogFormVisible">
			<el-form :model="form" size="small">
				<el-form-item label="商品名称" :label-width="formLabelWidth">
					<el-input v-model="form.goods.gname" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="商品品牌" :label-width="formLabelWidth">
					<el-input v-model="form.goods.gbrand" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="商品类型" :label-width="formLabelWidth">
					<treeselect v-model="form.goods.gtype" placeholder="商品类型" style="width:190px;" clearable
						:options="goodsTypeTree" :normalizer="normalizer" disabled />
				</el-form-item>
				<el-form-item label="商品型号" :label-width="formLabelWidth">
					<el-input v-model="form.goods.gmodel" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="商品颜色" :label-width="formLabelWidth">
					<el-select v-model="form.goods.gcolor" placeholder="请选择" disabled>
						<el-option v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
							:value="dict.dicDataVal" />
					</el-select>
				</el-form-item>
				<el-form-item label="商品市场价" :label-width="formLabelWidth">
					<el-input v-model="form.goods.marketPrice" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="采购成本" :label-width="formLabelWidth">
					<el-input v-model="form.goods.purchasePrice" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="商品库存量" :label-width="formLabelWidth">
					<el-input v-model="form.goods.stock" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="转赠品数量" :label-width="formLabelWidth">
					<el-input v-model="form.count" autocomplete="off" style="width: 200px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeForm()">关闭</el-button>
			</div>
		</el-dialog>

		<!-- 审核参数配置对话框 -->
		<el-dialog title="商转赠审核" :visible.sync="applyFormDialogVisable" width="600px" append-to-body>
			<el-form ref="applyForm" :model="applyForm" label-width="100px">
				<el-form-item label="审核意见">
					<el-input v-model="applyForm.approveContent" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="danger" @click="doApprove('未通过')">不通过</el-button>
				<el-button type="primary" @click="doApprove('已通过')">通过</el-button>
				<el-button @click="open=false">取 消</el-button>
			</div>
		</el-dialog>

		<el-dialog title="审核记录" :visible.sync="processTaskVisble" width="70%">
			<el-table ref="processTaskTableData" :data="processTaskTableData" tooltip-effect="dark">
				<el-table-column prop="taskName" label="任务名" align="center"></el-table-column>
				<el-table-column prop="taskUser" label="审批人员" align="center"></el-table-column>
				<el-table-column prop="taskBegin" label="产生时间" align="center"></el-table-column>
				<el-table-column prop="claimTime" label="签收时间" align="center"></el-table-column>
				<el-table-column prop="taskEnd" label="审核时间" align="center"></el-table-column>
				<el-table-column prop="approveResult" label="结果" align="center"></el-table-column>
				<el-table-column prop="approveContent" label="意见" align="center"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getGoodsTypeTree
	} from '@/api/gg/goodsType.js';
	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
		components: {
			Treeselect
		},
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					type: 'todos'
				},
				formLabelWidth: "120px",
				goodsTypeTree: [],
				colorList: [],
				todoDataList: [],
				dosDataList: [],
				goods2GiftsDialogFormVisible: false,
				form: {
					id: null,
					giftId: null,
					count: null,
					applyUser: null,
					applyStatus: null,
					goods: {
						gname: null,
						gbrand: null,
						gcolor: null,
						gtype: null,
						purchasePrice: null,
						marketPrice: null
					}
				},
				applyFormDialogVisable: false,
				applyForm: {
					id: null,
					taskName: '',
					processName: '',
					applyId: '',
					taskUser: '',
					taskBegin: '',
					taskEnd: '',
					approveResult: '',
					approveContent: '',
				},
				processTaskVisble: false,
				processTaskTableData: [],
				normalizer(node) {
					return {
						id: node.id,
						label: node.typeName,
						children: node.children,
					}
				},
			};
		},
		methods: {
			//审核
			handleAudit(idx, row) {
				this.applyForm = JSON.parse(JSON.stringify(row));
				this.applyFormDialogVisable = true;
			},
			closeForm() {
				this.resetForm();
				this.goods2GiftsDialogFormVisible = false;
			},
			resetForm() {
				this.form = {
					id: null,
					giftId: null,
					count: null,
					applyUser: null,
					applyStatus: null,
					goods: {
						gname: null,
						gbrand: null,
						gcolor: null,
						gtype: null,
						purchasePrice: null,
						marketPrice: null
					}
				}
			},
			handleClaim(idx, row) {
				axios.get('/goods2Gifts/claim/' + row.applyId).then(resp => {
					if (resp.code == 20000) {
						this.suc("签收成功");
						this.doQuery();
					}
				})
			},
			auditTrail(index, row) {
				axios.get('/goods2Gifts/audit/' + row.applyId).then(resp => {
					this.processTaskVisble = true;
					this.processTaskTableData = resp.data;
				})
			},
			handleClick(v) {
				let todo2History = v.name;
				this.queryParams.type = todo2History;
				this.doQuery();
			},
			//页码改变
			handleCurrentChange(val) {
				this.queryParams.pageNum = val;
			},
			//每页数量改变
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
			},
			//通过
			doApprove(r) {
				this.applyFormDialogVisable = false;
				this.applyForm.approveResult = r;
				axios.post('/goods2Gifts/doapprove', this.applyForm).then(resp => {
					if (resp.code == 20000) {
						this.suc("审批成功！");
						this.doQuery()();
					} else {
						this.error("审批失败");
					}
				})
			},
			showOrder(i, row) {
				axios.get('/goods2Gifts/' + row.applyId).then(resp => {
					this.form = resp.data;
					this.goods2GiftsDialogFormVisible = true;
				});
			},
			doQuery() {
				let t = this.queryParams.type;
				if (t == 'todos') {
					axios.get('/goods2Gifts/todos', {
						params: this.queryParams
					}).then(resp => {
						this.todoDataList = resp.list;
						this.queryParams.pageNum = resp.pageNum;
						this.queryParams.pageSize = resp.pageSize;
						this.queryParams.total = resp.total;
					})
				} else {
					axios.get('/goods2Gifts/dos', {
						params: this.queryParams
					}).then(resp => {
						this.dosDataList = resp.list;
						this.queryParams.pageNum = resp.pageNum;
						this.queryParams.pageSize = resp.pageSize;
						this.queryParams.total = resp.total;
					})
				}
			},
			//s设置表头行的样式
			tableHeaderColor({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return 'background-color:#dcdcdc;color:#6b6b6b;font-wight:100;font-size:15px;text-align:center'
			},
		},
		created() {
			getGoodsTypeTree().then(resp => {
				this.goodsTypeTree = resp.data;
			});
			this.getDictItems("phone_color").then(resp => {
				this.colorList = resp.data;
			});
		},
		mounted() {
			this.doQuery();
		}
	};
</script>

<style>
</style>
